<template>
  <div>
    <!-- 筛选列表 -->
    <el-card style="margin-bottom: 20px" id="search" class="search">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="90px"
          class="serach_contant"
        >
          <el-form-item label="所在省份：" prop="provinceName">
            <el-select
              v-model="queryParams.provinceName"
              placeholder="请输入所在省份"
              clearable
              size="small"
              @keyup.enter.native="selsectProvince"
              @change="changeProvince"
            >
              <el-option
                v-for="(item, index) in selectProvince"
                :key="index"
                :label="item.provinceName"
                :value="item.provinceName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所在城市：" prop="cityName">
            <el-select
              v-model="queryParams.cityName"
              placeholder="请输入所在城市"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="(item, index) in selectCityName"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="考点名称：" prop="employName">
            <el-input
              v-model="queryParams.employName"
              placeholder="请输入考点名称"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="申请时间：" prop="applyTime">
            <el-date-picker
              v-model="queryParams.applyTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              size="small"
              @keyup.enter.native="handleQuery"
            >
              <!-- <template slot-scope="scope">
                <span>{{ parseTime(scope.row.applyTime, "{y}-{m}-{d}") }}</span>
              </template> -->
            </el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="联系人：" prop="contactPerson">
            <el-input
              v-model="queryParams.contactPerson"
              placeholder="请输入联系人"
              clearable
              style="width: 200px"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              v-hasPermi="['gwoper:apply:query']"
            >查询
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 标签列表 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>标签列表</span>
        <el-button
          type="primary"
          size="mini"
          style="float: right"
          @click="handleExport"
          v-hasPermi="['gwoper:apply:export']"
        >
          导出数据
        </el-button>
      </div>
      <div class="text item">
        <!-- 批量管理    -->
        <div class="changeBtn">
          <el-button
            class="btnManage"
            type="primary"
            size="mini"
            style="float: right"
            @click="allMange"
            v-text="btnText"
          ></el-button>
          <el-button
            v-if="allManage"
            type="primary"
            size="mini"
            style="float: right; margin-right: 10px"
            @click="batchDelete"
            v-hasPermi="['gwoper:apply:remove']"
          >批量办理
          </el-button
          >
        </div>

        <!--  Table-->
        <el-table
          v-loading="loading"
          :data="teststieList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            v-if="allManage"
            type="selection"
            width="55"
            align="center"
          />
          <el-table-column
            type="index"
            width="80"
            align="center"
            label="编号"
          />
          <el-table-column
            label="所在省份"
            align="center"
            prop="provinceName"
            width="150"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="所在城市"
            align="center"
            prop="cityName"
            width="150"
          />
          <el-table-column label="考点名称" align="center" prop="employName"/>
          <el-table-column
            label="提供最大机房数量"
            align="center"
            prop="numberComputerRoom"
            width="150"
          />
          <el-table-column
            label="提供最大机位数量"
            align="center"
            prop="numberPc"
            width="150"
          />
          <el-table-column
            label="申请时间"
            align="center"
            prop="applyTime"
            width="200"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.applyTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['gwoper:apply:query']"
              >查看
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-folder-checked"
                class="btn_close"
                @click="handleDelete(scope.row.id)"
                v-hasPermi="['gwoper:apply:remove']"
              >已办理
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- page -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 修改标签配置对话框 -->
    <el-dialog
      title="指定考点资质申请"
      :visible.sync="open"
      width="700px"
      z-index="1500"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form ref="editform" :model="form">
        <el-form-item label="所在省份" prop="provinceName">
          <el-input v-model="form.provinceName"/>
        </el-form-item>
        <el-form-item label="所在城市" prop="cityName">
          <el-input v-model="form.cityName"/>
        </el-form-item>
        <el-form-item label="考点名称" prop="employName">
          <el-input v-model="form.employName"/>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contactPerson">
          <el-input v-model="form.contactPerson"/>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactPhone">
          <el-input v-model="form.contactPhone"/>
        </el-form-item>
        <el-form-item label="机房数量" prop="numberComputerRoom">
          <el-input v-model="form.numberComputerRoom"/>
        </el-form-item>
        <el-form-item label="机位数量" prop="numberPc">
          <el-input v-model="form.numberPc"/>
        </el-form-item>
        <el-form-item label="申请时间" prop="applyTime">
          <el-input v-model="form.applyTime"/>
        </el-form-item>
        <el-form-item label="考点环境照片" prop="applyQualificationImgsUrl">;
            <el-image v-for="(item,index) in schoolimg" :key="index"
                      style="width: 200px"
                      :src="item"
                      :preview-src-list="schoolimg"
            ></el-image>
            <el-button type="primary" @click="handleDownimg('0')"
            >下载图片
            </el-button>
        </el-form-item>
        <el-form-item
          label="考点申请表"
          prop="applyQualificationImgsUrl"
        >
          <el-image
            v-for="(item,index) in siteimgList" :key="index"
            style="width: 200px"
            :src="item"
            :preview-src-list="siteimgList"
          ></el-image>
          <el-button type="primary" @click="handleDownimg('1')"
          >下载图片
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    TestsiteList,
    DelTestsite,
    getProvinceName,
    getCityName,
  } from "@/api/gwoper/apply";

  export default {
    name: "applyTestsite",

    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 表格数据
        list: [],
        // 是否显示弹出层
        open: false,
        // 类型数据字典
        typeOptions: [],
        // 类型数据字典
        statusOptions: [],
        // 筛选省会城市
        selectProvince: [],
        selectCityName: [],
        // 表单参数
        form: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          province: null,
          cityName: null,
          employName: null,
          applyTime: null,
          contactPerson: null,
        },
        //显示批量管理
        allManage: false,
        btnText: "批量管理",
        //   申请时间
        value1: "",
        // 考点资质list
        teststieList: [],
        // 大图预览
        siteimgList: [],
        // 申请考资照片
        schoolimg: [],
      };
    },
    created() {
      this.getList();
      this.getProvinceName();
    },
    methods: {
      /** s筛选表单搜索 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      // 筛选表单重置
      resetQuery() {
        this.$refs["queryForm"].resetFields();
        this.queryParams = {
          province: "",
          cityName: "",
          employName: "",
          applyTime: "",
          contactPerson: "",
        };
        // this.queryParams.applyTime = null;
        this.getList();
      },
      /** 查询考点资质列表 */
      getList() {
        this.loading = true;
        console.log(this.queryParams);
        TestsiteList(this.queryParams)
          .then((response) => {
            console.log(response, "sitelist");
            if (response.code != 200) {
              this.loading = false;
              // return this.msgError(response.msg);
            }
            this.teststieList = response;
            this.total = response.length;
            this.$emit("closeApplyTestsite", this.total);
            // console.log(this.total)
            this.loading = false;
          })
          .catch((error) => {
            this.loading = false;
            console.log(error);
          });
      },
      // 获取筛选的省份和城市
      getProvinceName() {
        getProvinceName().then((res) => {
          // console.log(res, "ppp");
          this.selectProvince = res;
        });
      },
      changeProvince(value) {
        this.queryParams.provinceName = value;
        this.selectProvince.forEach(item=>{
          if(item.provinceName==value){
            getCityName(item.provinceId).then((res) => {
              this.selectCityName = res;
            });
          }
        })
        this.queryParams.cityName = "";

        // this.queryParams.provinceName = value.provinceName;
        // getCityName(value.provinceId).then((res) => {
        //   this.selectCityName = res;
        // });
        // this.queryParams.cityName = "";
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.multiple = !selection.length;
      },

      /** 查看按钮操作 */
      handleUpdate(row) {
        this.form = row;
        this.open = true;
        const schoolArry = this.form.schoolQualificationApplicationUrl;
        const siteArry = this.form.siteQualificationApplicationUrl;
        // console.log(str,'sss')
        const schoolimg = schoolArry.split(","); //字符分割
        const siteimgList = siteArry.split(","); //字符分割
        this.schoolimg = schoolimg;
        this.siteimgList = siteimgList;
        console.log(schoolimg, "schoolimg");
        console.log(siteimgList, "siteimglist");
      },

      //批量管理
      allMange() {
        this.allManage = !this.allManage;
        if (this.allManage == true) {
          this.btnText = "完成管理";
        } else if (this.allManage == false) {
          this.btnText = "批量管理";
        }
      },
      // 批量办理
      batchDelete() {
        // console.log(this.ids);
        if (this.ids.length <= 0) {
          return this.msgInfo("请选择需要删除的申请");
        }
        this.handleDelete(this.ids.join(","));
      },

      /** 办理按钮操作 */
      handleDelete(id) {
        const ids = id;
        this.$confirm("是否确认所选择的申请已办理?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            DelTestsite(ids).then((response) => {
              // console.log(response);
              if (response.code != 200) return this.msgError(response.msg);
              this.getList();
              this.ids = [];
              this.msgSuccess("办理成功");
            });
          })
          .catch(() => {
            this.msgInfo("办理取消");
          });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          "operation-center/exportSite",
          {
            ...this.queryParams,
          },
          `考点资质列表.xlsx`
        );
      }, sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
      },
      // 下载图片
      async handleDownimg(val) {
        console.log(val)
        let urlArr;
        if (val == 0) {
          urlArr = this.schoolimg;
        } else {
          urlArr = this.siteimgList;
        }
        let length = urlArr.length;
        for (let i = 0; i < length; i++) {
          window.location.href= urlArr[i];
          await this.sleep(1000);
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/styles/card.scss";
  // bannerlist图标的大小
  .aa {
    font-size: 20px;
  }

  .line {
    border-bottom: 1px solid #c0c4cc;
    padding: 20px 0;
  }

  h4 {
    // padding-bottom: 20px;
    margin: 0 !important;
  }

  span {
    font-size: 4px;
  }

  .flex {
    display: flex;
  }

  .BannerList {
    .el-form-item__content {
      margin-left: 0px !important;
    }

    .btnHeader {
      justify-content: space-between;
      border-bottom: 1px solid #c0c4cc;
    }

    #header {
      justify-content: space-between;
      margin-bottom: 20px;
    }

    // search
    #search .serach_contant {
      margin-top: 20px;
    }

    //批量管理
    .allManage {
      justify-content: space-between;

      .btnManage {
        justify-content: flex-end;
      }
    }
  }
</style>

